import QtQuick 2.15
import QtQuick.Controls

Item {
    ListView {
        id: listView
        anchors.fill: parent
        model: list_model
        spacing: 15
        delegate: Rectangle {
            id: delegate_root
            height: 87
            width: listView.width
            radius: 8
            color: '#ffffff'
            Image {
                id: icon
                anchors.margins: 18
                anchors.left: parent.left
                anchors.top: parent.top
                width: 24
                height: 24
                smooth: true
                source: icon_url
            }

            Label {
                id: title_
                anchors.left: icon.right
                anchors.verticalCenter: icon.verticalCenter
                anchors.leftMargin: 10
                text: title
                font.bold: true
            }

            Text {
                anchors.left: title_.left
                anchors.top: title_.bottom
                anchors.topMargin: 14
                text: message
                color: 'grey'
            }
            Timer {
                interval: 2000
                running: true
                onTriggered: pop_()
            }
        }
        populate: Transition {
            NumberAnimation {
                property: "opacity"
                from: 0
                to: 1.0
                duration: 1000
            }
        }
        add: Transition {
            ParallelAnimation {

                // NumberAnimation {
                //     property: "opacity"
                //     from: 0
                //     to: 1.0
                //     duration: 1000
                // }
                NumberAnimation {
                    property: "x"
                    // from: 0
                    from: width
                    duration: 100
                }
            }
        }

        displaced: Transition {
            NumberAnimation {
                properties: "x,y"
                duration: 400
                easing.type: Easing.InCurve
            }
        }
        remove: Transition {
            SequentialAnimation {
                NumberAnimation {
                    property: "opacity"
                    to: 0
                    duration: 300
                }
            }
        }
    }

    ListModel {
        id: list_model
    }

    function pop_() {
        list_model.remove(0, 1)
    }

    function notify(title, message, type) {
        let icon_url = ''
        switch (type) {
        case 'info':
        {
            icon_url = 'qrc:/assets/icons/info-filled.svg'
        }
        break
        case 'success':
        {
            icon_url = 'qrc:/assets/icons/success-filled.svg'
        }
        break
        case 'warning':
        {
            icon_url = 'qrc:/assets/icons/warning-filled.svg'
        }
        break
        case 'error':
        {
            icon_url = 'qrc:/assets/icons/circle-close-filled.svg'
        }
        break
        }

        console.log('icon_url:', icon_url)

        list_model.append({
                              "title": title,
                              "message": message,
                              "icon_url": icon_url
                          })
    }
}
